<template>
  <div v-if="sureAdmin">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>用户数据统计</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div class="echartsWrapper">
        <div id="userEcharts"></div>
        <div class="userCount">
          <div class="userTotal wrapper">
            <div class="line">
              总用户量
              <span>{{userTotal.user}}人</span>
            </div>
            <div class="blockLine">
              <div>普通用户：{{userTotal.user1}}人</div>
              <div>银卡用户：{{userTotal.user2}}人</div>
            </div>
            <div class="blockLine">
              <div>金卡用户：{{userTotal.user3}}人</div>
              <div>钻石用户：{{userTotal.user4}}人</div>
            </div>
          </div>
          <div class="newUser wrapper">
            <div class="line">
              今日新增
              <span>{{newUserTotal.user}}人</span>
            </div>
            <div class="blockLine">
              <div>普通用户：{{newUserTotal.user1}}人</div>
              <div>银卡用户：{{newUserTotal.user2}}人</div>
            </div>
            <div class="blockLine">
              <div>金卡用户：{{newUserTotal.user3}}人</div>
              <div>钻石用户：{{newUserTotal.user4}}人</div>
            </div>
          </div>
        </div>
        <!-- <div class="selectDate">
          <el-switch
            style="display: block; margin-bottom: 20px"
            v-model="checkDate"
            @change="changeCheckDate"
            active-color="#13ce66"
            inactive-color="#409EFF"
            active-text="按月查看"
            inactive-text="按年查看"
          >
          </el-switch>
          <el-date-picker
            v-model="date"
            :type="sureDate"
            @change="changeDate"
            :clearable="false"
            :value-format="dateFormat"
          ></el-date-picker>
        </div>
        <div id="turnoverEcharts"></div> -->
      </div>
    </el-card>
  </div>
</template>

<script>
// 1. 导入 echarts
import echarts from "echarts";
export default {
  data() {
    return {
      userTotal:{
        user:0,
        user1:0,
        user2:0,
        user3:0,
        user4:0,
      },
      newUserTotal:{
        user:0,
        user1:0,
        user2:0,
        user3:0,
        user4:0,
      },
      userOpinion: {
        title: {
          text: "用户统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "用户分类",
            type: "pie",
            radius: "50%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },

      date: "",
      sureAdmin: false,
    };
  },
  created() {
    var Admin = window.localStorage.getItem("admin");
    if (Admin == 1) {
      this.sureAdmin = true;
      this.getNowTime();
      this.getUserStatistics();
      this.getUserTotal();
      this.getNewUserTotal();
    } else {
      this.sureAdmin = false;
    }
  },
  mounted() {
  },
  methods: {
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      this.date = defaultDate;
      // console.log(defaultDate, "sssssssss");
    },
    async getUserStatistics() {
      const { data: res } = await this.$http.get("statistics2/userStatistics");
      // console.log(res, "3333333333333333333");
      this.userOpinion.series[0].data = res.data.userVOList;
      this.drawPie();
      // console.log(this.userOpinion.series[0].data);
      // this.drawLine();
    },
    async getUserTotal(){
      const { data: res } = await this.$http.get("statistics2/userTotal");
      this.userTotal = res.data;
    },
    async getNewUserTotal(){
      const { data: res } = await this.$http.get("statistics2/newUserTotal?date="+this.date);
      this.newUserTotal = res.data;
    },
    drawPie() {
      var myChart = echarts.init(
        document.getElementById("userEcharts"),
        "light"
      );
      myChart.setOption(this.userOpinion);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
#userEcharts {
  // background-color: aquamarine;
  width: 50%;
  height: 500px;
  // border: 1px solid red;
  // margin: 10px auto;
}
.echartsWrapper {
  width: 100%;
  // height: 500px;
  // border: 1px solid red;
  margin: 50px auto;
  display: flex;
  justify-content: space-around;
  // position: relative;
  // .selectDate {
  //   position: absolute;
  //   right: 3%;
  //   // width: 5%;
  // }
  .userCount {
    width: 500px;
    height: 500px;
    // background-color: rgb(67, 116, 99);
    text-align: left;
    color: rgba(255, 255, 255, 0.884);
    line-height: 50px;
    text-align: start;
    font-size: 14px;
    .userTotal {
      background-color: #3498db;
      padding-left: 20px;
      margin-bottom: 30px;
      // div{
      //   margin-left: 20px;
      // }
    }
    .newUser {
      background-color: #2ecc71;
      padding-left: 20px;
    }
    .wrapper {
      height: 200px;
      width: 350px;
      // background-color: #00d2d3;
      border-radius: 10px;
    }
    .line {
      font-size: 20px;
      // font-weight: bolder;
      border-bottom: 2px solid rgba(255, 255, 255, 0.418);
      margin: 15px 0px;
      position: relative;
      span {
        position: absolute;
        right: 25px;
      }
    }
    .blockLine {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>